<template>
  <div class="videos">
     <video-player  class="video-player vjs-default-skin vjs-big-play-centered"
          ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
        ></video-player>  
  </div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
export default {
  name:'Videos',
  props:['videoList','index'], 
  data () {
    return {
      playerOptions : {
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', 
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
              {
                  src: this.videoList.url,  // 路径
                  type: 'video/mp4'  // 类型
              }, 
          ],
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar:false
      },
      playing:true
    }
  },
  created(){
    this.autoPlayAction();
  },
  methods: {
    playOrStop(){
      if(this.playing){
        this.$refs.videoPlayer.player.pause();
        this.playing = false;
      }else{
        this.$refs.videoPlayer.player.play();
        this.playing = true;
      }
    },
    play(){
      this.$refs.videoPlayer.player.load();
      this.$refs.videoPlayer.player.play();
      this.playing = true;
    },
    stop(){
      this.$refs.videoPlayer.player.pause();
      this.playing = false;
    },
    autoPlayAction(){
      if (this.index == 0) {
        this.playerOptions.autoplay = true;
      }
    }
  },
  components: {
    videoPlayer
  }
}
</script>
<style>
  .videos{
    position: relative;
  }
  .videos .vjs-default-skin > .video-js .vjs-big-play-button{
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
  }
</style>